// Create the heatmap of CIOS data (currently only uses first question data)
function heatmap() {
	vis_heat = new pv.Panel();
	
	// Set margins and other main variables and constants
	//  See "scatterplot.js" for more information
	var marginL = 20,
		marginR = 20,
		w = winW-marginL-marginR-interactionsWidth-60, 
		termRange = pv.range(0, 19),
		x = pv.Scale.ordinal(termRange).split(0, w),
		y = pv.Scale.linear(0, 4.1).range(0, h),
		boxHeight = 60,
		boxWidth = 100,
		// Compute the number of horizontal divisions in matrix
		numHorizontalDiv = Math.round(w/boxWidth)-1,
		// Compute the needed height of the visualization
		h = (70/numHorizontalDiv)*boxHeight,
		labelFont = "10pt Sans Serif";
	
	// Compute min, max and average averages of the 10 questions in 
	//  order to make an appropriate scale
	var minAvg = new Array();
	var maxAvg = new Array();
	var avgAvg = new Array();
	var cur, temp;
	// Set some initial values
	for(var j = 1; j <= 10; j++) {
		minAvg[j] = 1000;// Set high min
		maxAvg[j] = -1; // Set negative max
		avgAvg[j] = 0;
	}
	// Loop through each question 1-10
	for(var j = 1; j <= 10; j++) {
		// Loop through each data point in cios_data
		for(var i = 0; i < cios_data.length; i++) {
			// Make a string to parse since the variable names are avg_item1mean, avg_item2mean, etc.
			temp = "cur = parseFloat(cios_data[i]."+'avg_item'+j+'mean'+");";
			eval(temp);
			avgAvg[j] += cur;
			if(cur < minAvg[j]) {
				minAvg[j] = cur;
			}
			if(cur > maxAvg[j]) {
				maxAvg[j] = cur;
			}
		}
		avgAvg[j] = avgAvg[j]/cios_data.length;
	}
	
	// Using the previously computed min, avg and max create a color scale
	c = pv.Scale.linear(minAvg[1], avgAvg[1], maxAvg[1]).range('red', 'white', 'green');

	// Set basic properties of the visualization
	vis_heat.width(w)
		.height(h)
		.left(marginL)
		.right(marginR)
		.strokeStyle("#ccc")
		.def("i", -1);
	
	// Create a box for every department
	var box = vis_heat.add(pv.Bar)
		.data(cios_data)
		.width(boxWidth)
		.height(boxHeight)
		// Compute top and left based upon the number of horizontal divisions
		.top(function(d) Math.floor(this.index/numHorizontalDiv)*boxHeight)
		.left(function(d) (this.index%numHorizontalDiv)*boxWidth)
		// Set the color based on the mean
		.fillStyle(function(d) {
			return c(d.avg_item1mean);
		})
		// Sets the alt details on demand text to a rounded javascript value of 2 decimal places
		.title(function(d) Math.round(d.avg_item1mean*Math.pow(10,2))/Math.pow(10,2))
	  // Add department code
	  .anchor("center").add(pv.Label)
	    .text(function(d) d.Code)
		.font("15px sans-serif");
	
	// Add color scale on bottom right of graph
	vis_heat.add(pv.Bar)
		// Make data between the min and max
    	.data(pv.range(minAvg[1], maxAvg[1], (maxAvg[1]-minAvg[1])/85))
    	.bottom(function() this.index * 3 + 20)
		.right(40)
    	.height(4)
		.width(32)
    	.fillStyle(c)
	  // Add a label to every block based on it's value
	  .add(pv.Label)
	  	// Round displayed value to 2 decimal places
	  	.text(function(d) Math.round(d*Math.pow(10,2))/Math.pow(10,2))
		// Only make the text visible if it is the first, the last or average values
		.visible(function(d) {
			// Round the current data point
			var rounded = Math.round(d*Math.pow(10,2))/Math.pow(10,2);
			// Compute the rounded average
			var roundedAvg = Math.round(avgAvg[1]*Math.pow(10,2))/Math.pow(10,2);
			// Set a tolerance parameter
			var a = 0.01;
			if(this.index == 0 || this.index == 84) {
				return true;
			}
			// If it is within the tolerance of the rounded average then display text
			if(rounded > roundedAvg - a && rounded < roundedAvg + a) {
				return true;
			} else {
				return false;
			}
		})
		.font("16px sans-serif")
		// Set the text baselines so that the color scale is labeled
		.textBaseline(function(d) {
			if(this.index == 0) {
				return "top";
			} else if(this.index == 84) {
				return "bottom";
			} else {
				return "center";
			}
		});
	

	vis_heat.render();
}

